// //加载公共样式
require('../../assets/css/public.less')
// //加载自己的样式
require('./circle.less');
//引入axios工具函数
const request = require('../../lib/request/request')
//引入tabbar渲染函数
const renderTabbar = require('../../lib/tabbar/tabbar')
//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'
// 获取元素
function $(sel) {
    return document.querySelector(sel)
}

window.onload = () => {
    //渲染tabbar
    renderTabbar('circle')


    //获取用户信息==获取头像
    function getUserInfo() {
        request.get('/api/user/info')
            .then(res => {
                console.log(res);
                //1 解构数据
                let { errno, data } = res.data
                //2 判断
                if (errno === 0) {
                    //3 处理业务逻辑数据
                    render(data)
                }
            })
    }

    //渲染数据
    function render(data) {
        //图片渲染 服务器地址+相对路径+文件名
        $('.headImg').src = API + data.imgUrl
        console.log(data);

    }
    //初始化获取用户信息
    getUserInfo()

    // 获取课程信息
    request.get('/api/train/courseList')
        .then(res => {
            // 解构
            let { errno, data } = res.data
            // 判断
            if (errno === 0) {
                // 渲染
                renderCorse(data)
            }
        })
    // 渲染课程
    function renderCorse(data) {
        let html = `
        <p class="recom">推荐课程</p>
        <a href="./cuorse-detal.html?id=${data[0].courseId}" class="corseBox  df fdc">
            <img src="${API + data[0].imgurl}" alt="" class="corseImg">
            <div class="corseT df fdc">
                <p class="corseP1">${data[0].name}</p>
                <p class="corseP2">${data[0].desc}</p>
            </div>
        </a>

        `
        $('.recomBox').innerHTML = html
    }



    // 获取圈子信息
    request.get('/api/circles/opinionList').then(res => {
        let { errno, data } = res.data
        if (errno === 0) {
            console.log('data :>> ', data);
            // 渲染
            renderCir(data)

        }
    })

    // 渲染
    function renderCir(data) {
        let html = `
        ${data.map((v, i) => {
            return ` <div class="headBox df aic">
                    <img class="headImg" >
                   <div class="userInfo df fdc">
                       <p class="userName">${v.nickName}</p>
                       <p class="userPro">${v.releaseProvinceId}省, ${data.releaseCityId}市</p>
                   </div>
               </div>
               <p class="usermess">>${v.content}</p>
               <div class="userImgs df fww jcse">
                   <img src="#" alt="" class="commImg">
                   <img src="#" alt="" class="commImg">
                   <img src="#" alt="" class="commImg">
                   <img src="#" alt="" class="commImg">
                   <img src="#" alt="" class="commImg">
                   <img src="#" alt="" class="commImg">
                </div>
           </div>`
        }).join('')}
        `
        $('.userBox').innerHTML = html
    }



}